<template>
  <div>
      
      <el-table :data="MyData" border stripe >
          <el-table-column prop="adoid" label="领养ID" width="80">
          </el-table-column>
          <el-table-column prop="petid" label="宠物ID" width="120">
          </el-table-column>
          <el-table-column prop="petname" label="宠物名" width="120">
          </el-table-column>
          <el-table-column label="图片" width="120">
              <template  slot-scope="scope">
                  <img :src="scope.row.image" alt="图片" width="60" height="60" style="border-radius: 50%;">
              </template>
          </el-table-column>
          <el-table-column label="状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.adostatus==2" style="color:#37B328">申请成功</span>
                <span v-else-if="scope.row.adostatus==0" style="color: #6495ED">未领养</span>
                <span v-else-if="scope.row.adostatus==3" style="color: red">申请失败</span>
                <span v-else style="color: #EEC900">正在处理</span>
              </template>
          </el-table-column>
          <el-table-column prop="date" label="创建日期" width="240">
          </el-table-column>
          <el-table-column prop="note" label="备注信息">
          </el-table-column>
          <el-table-column label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.adostatus==1">
                        <el-button type="warning" @click="refus(scope.row.adoid)">撤销申请</el-button>
                    </span>
                    <span v-else-if="scope.row.adostatus==3">
                        <el-popconfirm  confirm-button-text='确定' cancel-button-text='取消'
                            icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.adoid)">
                            <el-button type="danger" slot="reference">删除记录</el-button>
                        </el-popconfirm>
                    </span>
                    <span v-else>
                        <el-button type="primary" @click="info(scope.row)">查看信息</el-button>
                    </span>
                </template>
            </el-table-column>  
                
      </el-table>
      <div style="padding: 10px 0;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
      </div>
      <el-dialog title="宠物信息" :visible.sync="dialogFormVisible" width="30%">
          <el-form label-width="70px">
              <el-form-item label="宠物名">
                  <el-input v-model="form.petname" autocomplete="off" disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <img :src="form.image" width="60" height="60" style="border-radius: 50%;"">
                </el-form-item>
              <el-form-item label="年龄">
                  <el-input v-model="form.petage" autocomplete="off" disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <template>
                    <span v-if="form.petsex>0" style="color:#87CEFA; font-size: large">♂</span>
                    <span v-else style="color: #EEB4B4; font-size: large">♀</span>
                </template>
              </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="quit">取 消</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  name: "Adoption",
  props: {

  },
  data() {
      return {
          typ:0,
          u_name: '',
          pageNum: 1,
          pageSize: 10,
          total: 0,
          tableData: [],
          MyData:[],
          form: {},
          formX: {},
          collapseBtnClass: 'el-icon-s-fold',
          isCollapse: false,
          sideWidth: 200,
          logoTextShow: true,
          dialogFormVisible: false,
          multipleSelection: [],
          deleteIds: [],
          n: 0,
          dialogImageUrl: '',
          dialogVisible: false,
          imgfile:[],
          isShow:true,
          utable:[],
          ptable:[],
          userAcc:''
          
      }
  },
  created() {
      this.load().then(()=>{
            console.log(this.MyData);
        })
  },
  mounted(){
      this.load();
  },
  methods: {
      handleExcelImportSuccess() {
          this.$message.success("文件导入成功");
          this.load();
      },
      exp() {
          window.open("http://localhost:8080/user/export")
      },
      quit() {
          this.dialogFormVisible = false;
          this.load();
      },
      deleteData() {
          this.$confirm('您确定删除吗', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
          }).then(() => {
              console.log(this.deleteIds);
              var p=new URLSearchParams();
              p.append("userid",this.deleteIds);
              axios({
                  
                  url:"http://localhost:8080/user/delBatch",
                  method:"delete",
                  params:p
              }).then(obj=>{
                  if(obj.data){
                      this.$message.success("删除成功");
                      this.load();
                  }else{
                      this.$message.error("删除失败");
                  }
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消'
              });
              this.load();
          });
      },
      handleSelectionChange(dataList) {
          this.deleteIds = [];
          dataList.forEach(item => {
              this.deleteIds.push(item.userid)
          })
          console.log(this.deleteIds);
      },
      refus(id){
          var p=new URLSearchParams();
          p.append("adoid",id);
          axios({
              url:"http://localhost:8080/adoption/refuseAdo",
              method:"put",
              params:p
          }).then(obj=>{
              if(obj.data.res){
                  this.$message.success("撤销成功");
                  var k=new URLSearchParams();
                  k.append("petid",obj.data.petid);
                  k.append("status",0);
                  axios({
                      url:"http://localhost:8080/pet/updateById",
                      method:"put",
                      data:k
                  }).then(r=>{
                      this.load();
                  })
              }else{
                  this.$message.error(obj.data.message);
              }
          });
      },
      del(id) {
          var p=new URLSearchParams();
          p.append("adoid",id);
          axios({
              url:"http://localhost:8080/adoption/delAdo",
              method:"delete",
              params:p
          }).then(obj=>{
              if(obj.data){
                  this.$message.success("删除成功");
                  this.load();
              }else{
                  this.$message.error("删除失败");
              }
          });
      },
      info(row) {
        this.imgfile=[];
        this.form = row;
        this.imgfile.push({name:"123.jpg", url:row.image});
        this.dialogFormVisible = true;
      },
      save() {
          // var t=new URLSearchParams();
          // t.append("userid",this.form.userid);
          var param=new URLSearchParams();
          param.append("userid",this.form.userid);
          param.append("username",this.form.username);
          param.append("email",this.form.email);
          param.append("avatar",this.dialogImageUrl);
          param.append("address",this.form.address);
          var t=new URLSearchParams();
          t.append("username",this.form.username);
          t.append("email",this.form.email);
          t.append("avatar",this.dialogImageUrl);
          t.append("address",this.form.address);
          
          if(this.typ==0){
              axios({
                  url:"http://localhost:8080/user/updateUser",
                  method:"put",
                  data:param
              }).then(obj => {
                  if(obj.data){
                      this.$message.success("修改成功");
                      this.quit();
                      this.load();
                      
                  }else{
                      this.$message.error("修改失败");
                  }
              })
          }else{
              axios({
                  url:"http://localhost:8080/user/addUser",
                  method:"post",
                  data:t
              }).then(obj=>{
                  if(obj.data){
                      this.$message.success("新增成功");
                      this.quit();
                      this.load();
                  }else{
                      this.$message.error("新增失败,该用户名已被使用");
                  }
              });
              this.typ=0;
          }
          
          
      },
      add() {
          this.isShow=false;
          this.imgfile=[];
          this.dialogFormVisible = true;
          this.typ=1;
          this.form = {};
      },
      reset() {
          this.u_name = '';
          this.load();
      },
      load() {
          this.isShow=true;
          this.userAcc=JSON.parse(sessionStorage.getItem("loginUser"));
          var param=new URLSearchParams();
          param.append("page",this.pageNum);
          param.append("size",this.pageSize);
          param.append("userid",this.userAcc.userid);
          return axios({
              url:"http://localhost:8080/adoption/adoRecordGet",
              method:"get",
              params:param

          }).then(obj => {

              this.tableData=obj.data.records;
              this.total=obj.data.total;
              
              return Promise.all([this.load2(), this.load3()]);

          }).then(()=>{
            this.MyData = this.tableData;
          })
          
          

          
          
              
      },
      load2(){
        
          return axios({
                  url:"http://localhost:8080/user/getAllUser",
                  method:"get"
              }).then(res=>{
                  this.utable=res.data;
                  var i;
                  var j;
                  for(i=0;i<this.tableData.length;i++){
                      for(j=0;j<this.utable.length;j++){
                          if(this.utable[j].userid==this.tableData[i].userid){
                              this.tableData[i].username=this.utable[j].username;
                          }
                      }
                  }
                  
              });
      },
      load3(){
          return axios({
                  url:"http://localhost:8080/pet/getAllPet",
                  method:"get"
              }).then(ssh=>{
                  this.ptable=ssh.data;
                  var m;
                  var n;
                  for(m=0;m<this.tableData.length;m++){
                      for(n=0;n<this.ptable.length;n++){
                          if(this.ptable[n].petid==this.tableData[m].petid){
                              this.tableData[m].petname=this.ptable[n].petname;
                              this.tableData[m].image=this.ptable[n].image;
                              this.tableData[m].petsex=this.ptable[n].petsex;
                              this.tableData[m].petage=this.ptable[n].petage;
                          }
                      }
                  }
              });
      },
      handleSizeChange(pageSize) {
          
          this.pageSize = pageSize;
          this.load();
      },


      handleCurrentChange(pageNum) {
          
          this.pageNum = pageNum;
          this.load();
      },
      imgSuccess(res, file) {
    this.dialogImageUrl=res.data;
    this.form.image=this.dialogImageUrl;
    
    //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
  },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitUpload(value){
      if(value==1){
          this.$refs["upload1"].submit();
      }
    },
    myUpload(content){
      var param=new FormData();
      param.append("uploadFile",content.file);
      axios({
          url:"http://localhost:8080/user/upload",
          method:"post",
          data:param
      }).then(obj=>{
          this.$message.success(obj.data.message);
          if(obj.data.status==1){
              
              this.dialogImageUrl=obj.data.data;
              console.log(this.dialogImageUrl);

              this.save();
              this.clearFiles();
          }
      })
    },
    
  clearFiles () {
    this.$refs['upload1'].clearFiles();
  },

  allow(value){
      console.log(value);
      var param=new URLSearchParams();
      param.append("adoid",value.adoid);
      param.append("userid",value.userid);
      param.append("petid",value.petid);
      param.append("note",value.note);
      axios({
          url:"http://localhost:8080/adoption/petAllow",
          method:"put",
          data:param
      }).then(obj=>{
          if(obj.data){
              var m=new URLSearchParams();
              //此处继续，写一个findbyId
              m.append("petid",value.petid);
              m.append("status",2);
              axios({
                  url:"http://localhost:8080/pet/updateById",
                  method:"put",
                  data:m
              }).then(res=>{
                  if(res.data){
                      this.$message.success("已同意该申请");
                      this.load();
                  }
                  else{
                      this.$message.error("同意失败");
                  }
              })
              
          }
      });
  }
  }
}
</script>